<template>
  <div class="paper-detail-container">
    <div v-show="paperInfo.state === 0">
      <div class="paper-detail-title-container">
        论文"{{paperInfo.title}}"已被删除
      </div>
    </div>
    <div v-show="paperInfo.state === 1">
      <div class="paper-detail-title-container">
        {{paperInfo.title}}
        <div class="option-btn-group">
          <el-button class="option-btn" type="primary" size="mini" @click="modify">修改<i class="el-icon-setting"></i></el-button>
          <el-button type="danger" size="mini" @click="dialogVisible = true">删除<i class="el-icon-delete"></i></el-button>
        </div>
      </div>
      <div class="paper-detail-info-container">
        <div class="paper-detail-info-sub-container">
          <div class="paper-detail-info-kv-container">
            <div class="paper-detail-info-key">领域:</div>
            <div class="paper-detail-info-value">{{paperInfo.domain}}</div>
          </div>
          <div class="paper-detail-info-kv-container">
            <div class="paper-detail-info-key">作者:</div>
            <div class="paper-detail-info-value">{{paperInfo.author}}</div>
          </div>
          <div class="paper-detail-info-kv-container">
            <div class="paper-detail-info-key">上传日期:</div>
            <div class="paper-detail-info-value">{{paperInfo.date}}</div>
          </div>
        </div>
        <div class="paper-detail-info-sub-container">
          <div class="paper-detail-info-kv-container">
            <div class="paper-detail-info-key">所属比赛:</div>
            <div class="paper-detail-info-value">{{paperInfo.competitionName}}</div>
          </div>
          <div class="paper-detail-info-kv-container">
            <div class="paper-detail-info-key">比赛年份:</div>
            <div class="paper-detail-info-value">{{paperInfo.year}}</div>
          </div>
          <div class="paper-detail-info-kv-container">
            <div class="paper-detail-info-key">题号索引:</div>
            <div class="paper-detail-info-value">{{paperInfo.type}}</div>
          </div>
        </div>
        <div class="paper-detail-info-sub-container">
          <div class="paper-detail-info-pl-container">
            <div class="paper-detail-info-ptr">算法标签:</div>
            <div class="paper-detail-info-list">
              <div v-for="(item, index) in paperInfo.methodList">
                <div class="paper-detail-algo-lable-item">
                  {{item}}
                </div>
              </div>
            </div>
          </div>
          <div class="paper-detail-info-pl-container">
            <div class="paper-detail-info-ptr">资源下载:</div>
            <div class="paper-detail-info-list">
              <div v-for="(item, index) in fileList">
                <div @click="downloadFile(item)" class="paper-detail-algo-lable-item">
                  {{item.filename}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <comment-area v-bind:commentAreaStyle="commentAreaStyle"/>
      <div class="paper-detail-textarea-container">
        <img class="paper-detail-textarea-avatar" :src="avatar">
        <el-input show-word-limit :maxlength="128" class="paper-detail-textarea-body" type="textarea" v-model="commentInput"></el-input>
        <div @click="handlePushMainComment" class="paper-detail-textarea-btn" type="primary">发表评论</div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>确认删除该论文？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deletePaper">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getPaperDetail, deletePaper, getFileListByPid} from "../../api/paper";
  import CommentArea from '@/components/CommentArea'
  import {avatarMap, ROLE_KEY, ROLE_MAP, UID_KEY} from "../../constants";
  import {pushMainComment} from "../../api/reply";
  import {getDownloadUrl} from "../../api";

  export default {
    name: 'PaperDetail',
    components: {
      CommentArea
    },
    data() {
      return {
        dialogVisible: false,
        paperInfo: {
          methodList:[]
        },
        fileList: [],
        commentAreaStyle: {
          margin: '10px auto 0',
          backgroundColor: '#fff',
          padding: '10px 15px 10px 15px',
          borderRadius: '5px',
          // width: '80%'

        },
        avatar: avatarMap[localStorage.getItem(ROLE_KEY)],
        commentInput: ''
      }
    },
    methods: {
      handlePushMainComment() {
        if(!this.commentInput) {
          this.$message.error("评论不能为空")
          return
        }
        const data = {
          pid: this.paperInfo.pid,
          content: this.commentInput,
          uid: localStorage.getItem(UID_KEY),
          role: ROLE_MAP[localStorage.getItem(ROLE_KEY)]
        }
        pushMainComment(data).then(res => {
          console.log(res)
        })
      },
      modify() {
        this.$router.push(`/paper/modify/${this.paperInfo.pid}`)
      },
      downloadFile(item) {
        const data = {
          filename: item.filename,
          filepath: item.filepath
        }
        getDownloadUrl(data).then(res => {
          console.log(res.data)
          window.open(res.data)
        })
      },
      deletePaper() {
        deletePaper(this.paperInfo.pid)
          .then(res => {
            this.$router.go(0);
          })
          .catch(error => {
            this.$message({
              showClose: true,
              message: '删除失败',
              type:'error'
            })
          })
      }
    },
    mounted() {
      console.log(this.$route.params.id);
      getPaperDetail({'pid': this.$route.params.id}).then(res => {
        this.paperInfo = res.data
      });
      getFileListByPid({'pid': this.$route.params.id}).then(res => {
        this.fileList = res.data
      })
      console.log(localStorage.getItem(ROLE_KEY))
    }
  }
</script>

<style lang="scss" scoped>
  .option-btn-group {
    float: right;
    padding-bottom: 2px;
  }
  .paper-detail {
    &-container {
      margin: 20px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
    &-title-container {
      text-align: center;
      background-color: white;
      padding: 10px;
      font-weight: 600;
      border-radius: 5px;
    }
    &-info-container {
      margin-top: 10px;
      display: flex;
      border-radius: 5px;
      justify-content: space-between;
    }
    &-info-sub-container {
      background-color: white;
      width: 32.5%;
      box-sizing: border-box;
      padding: 8px;
    }
    &-info-kv-container {
      height: 45px;
      display: flex;
      align-items: center;
      font-size: 16px;
      /*margin-bottom: 5px;*/
      justify-content: space-between;
    }
    &-option-container {
      margin-top: 10px;
      display: flex;
      border-radius: 5px;
      justify-content: space-between;
      background-color: white;
      box-sizing: border-box;
    }
    &-info-key {
      font-weight: 600;
    }
    &-info-value {}
    &-info-pl-container {
      //height: 60px;
      font-size: 16px;
      /*margin-bottom: 5px;*/
      justify-content: space-between;
      flex-wrap: wrap;
    }
    &-info-ptr {
      display: flex;
      height: 30px;
      position: relative;
      top: 5px;
      align-items: center;
      font-weight: 600;
      width: 100%;
    }
    &-info-list {
      display: flex;
      flex-wrap: wrap;
      line-height: 18px;
      font-size: 14px;
      height: 36px;
      align-items: center;
    }
    &-algo-lable-item {
      margin-right: 8px;
      margin-top: 3px;
      color: #20a0ff;
      cursor: pointer;
    }
    &-textarea-container {
      /*width: 80%;*/
      background-color: white;
      padding: 10px 20px;
      /*margin-top: 10px;*/
      margin: 10px auto 0;
      display: flex;
      align-items: center;
    }
    &-textarea-avatar {
      width: 40px;
      height: 40px;
      border-radius: 20px;
    }
    &-textarea-body {
      margin-left: 15px;
      margin-right: 10px;
      /*font-size: 18px;*/
    }
    &-textarea-btn {
      display: flex;
      align-items: center;
      min-width: 50px;
      max-width: 50px;
      height: 50px;
      text-align: center;
      background-color: #409EFF;
      box-sizing: border-box;
      padding: 5px;
      font-size: 14px;
      color: white;
      border-radius: 4px;
      cursor: pointer;
    }
  }
</style>
